import 'package:flutter/material.dart';
import 'package:poet/pages/theme_config.dart';

class BkgItemGroup extends StatefulWidget {
  Function onItemChange;

  BkgItemGroup({this.onItemChange});

  @override
  State<StatefulWidget> createState() {
    return _BkgItemGroup();
  }
}

class _BkgItemGroup extends State<BkgItemGroup> {
  int _currentItemIndex = -1;

  final _bkgItems = <BkgItemModel>[
    BkgItemModel("无", null),
    BkgItemModel("泛舟", "assets/images/1.png"),
    BkgItemModel("青山", "assets/images/2.png"),
    BkgItemModel("寒梅", "assets/images/3.png"),
    BkgItemModel("湖水", "assets/images/4.png"),
  ];

  void _onTap(int index, BkgItemModel item) {
    setState(() {
      _currentItemIndex = index;
    });
    if (widget.onItemChange != null) {
      widget.onItemChange(item);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: _bkgItems
            .asMap()
            .keys
            .map((i) => BkgItem(
                  _bkgItems[i].name,
                  _bkgItems[i].url,
                  selected: _currentItemIndex == i,
                  onTap: () => _onTap(i, _bkgItems[i]),
                ))
            .toList(),
      ),
    );
  }
}

class BkgItemModel {
  final name;
  final url;

  BkgItemModel(this.name, this.url);
}

class BkgItem extends StatelessWidget {
  final String name;
  final String src;
  bool selected = false;
  VoidCallback onTap;

  BkgItem(this.name, this.src, {this.selected: false, this.onTap});

  bool get empty => src == null;

  Widget _buildEmptyItemContent() {
    return Padding(
      padding: EdgeInsets.all(10),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(
            width: 1,
            style: BorderStyle.solid,
            color: Color(ThemeConfig.weakColor),
          ),
        ),
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Container(),
        ),
      ),
    );
  }

  DecorationImage _buildImageItemContent() {
    return DecorationImage(
      image: AssetImage(
        src,
      ),
      fit: BoxFit.cover,
      alignment: Alignment.centerLeft,
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(vertical: 10),
              child: Text(
                "$name",
                textScaleFactor: 1.2,
                style: TextStyle(
                  color: Color(
                      selected ? ThemeConfig.secColor : ThemeConfig.weakColor),
                ),
              ),
            ),
            Container(
              width: 120,
              height: 120,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: const Color(0xFFd0d0d0),
                    blurRadius: 4.0,
                    spreadRadius: 0.1,
                  )
                ],
                image: empty ? null : _buildImageItemContent(),
              ),
              child: empty ? _buildEmptyItemContent() : null,
            ),
          ],
        ),
      ),
    );
  }
}
